<template>
  <el-card style="height: 640px; width: 1200px">
    <template v-slot:header>
      <el-button
        type="primary"
        circle
        plain
        icon="el-icon-back"
        @click="to_resource"
      ></el-button>
    </template>
    
    <!-- limit 已累计上传最大数，已上传的文件超过此值，则不允许上传。 -->
    <el-upload
      :headers="headers"
      class="upload-demo"
      :action="uploadUrl"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="success"
      :on-error="error"
      multiple
      name="file"
      :drag="true"
      :limit="100"
      accept="image/jpeg,image/png,video/mp4"
      :auto-upload="true"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :show-file-list="true"
      list-type="text"
      :before-upload="onBeforeUpload"
    >
        <h4>上传方式：点击 或 拖拽</h4>
        <el-divider class="divider">上传区</el-divider>
        <h4 style="color: red">
            只支持jpg、png、mp4文件，<br><br> 单个文件不得超过50M。
        </h4>
      
    </el-upload>
  </el-card>
</template>
<script>
import router from "@/router";
export default {
  name: "Resource_upload",
  data() {
    return {
      uploadUrl: this.$http.defaults.baseURL + "upload",
      headers: {},
      fileList: [],
    };
  },
  mounted() {
    //////2021-9-4 加上, 给el-upload 加上 token 头, 否则无法上传
    console.log("mounted");
    const token = sessionStorage.getItem("Authorization");
    if (token) {
      this.headers = {
        Authorization: token,
      };
    }
  },
  methods: {
    to_resource() {
      this.$router.push("/resource");
    },
    onBeforeUpload(file) {
      // console.log(file);
      const isImgOK = "image/jpeg,image/png,video/mp4".indexOf(file.type) != -1;
      const isLt10M = file.size / 1024 / 1024 < 50;
      if (!isImgOK) {
        this.$message.error("格式错误");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("文件超过50M");
        return false;
      }
      return true;
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `还可以上传${100 - fileList.length}个文件，\n
        本次选择了${files.length}个文件，请稍后再试！
        `
      );
      this.fileList = [];
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`);
      return true;
    },
    error(err, file, fileList) {
      // console.log(err)
      // console.log('=============================')
      // console.error(`上传失败:${file.name}!`)

      // this.$message({
      //   type:'error',
      //   message:`上传失败->${file.name}!`
      // })

      this.$notify.error({
        title: "错误",
        message: `上传失败:${file.name}!`,
        duration: 10000,
      });
    },
    success(response, file, fileList) {
      // console.log("---->", fileList.length);
      // console.log('---->', file);
      // this.fileList.splice(this.fileList.length-1,1)
      // console.log("---->", fileList.length);

      // console.log(response);

      //console.log(file);
      //console.log(fileList);
      //response === 传回来的json {}
      //file 是返回的信息的封装， 包含：
      //status:'success'，
      //name: xxx.jpg
      //size:32122
      //response:就是第一个参数response
      // fileList 是记录上传成功的列表
    },
  },
};
</script>
<style scoped>
.upload-demo >>> .el-upload-dragger {
  /* background-color:red; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.01);
  width: 500px;
  height: 400px;
}
.upload-demo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.upload-demo >>> .el-upload-list.el-upload-list--text{
  height: 450px;
  overflow-y: scroll;
}
.divider >>> .el-divider__text{
background-color: transparent;
}
</style>